<ul id="nav">
	<li><a class="ajaxlink" id="lnkDocePrincipales">Lideres Principales</a></li> 
	<li><a class="ajaxlink"id="lnkPersonalizada">Lista personalizada</a></li> 
	<li><a class="ajaxlink"id="lnkAllLideres">Todos los lideres</a></li>
	<li><a class="ajaxlink"id="lnkAllMemebers">Todos los miembros</a></li>
</ul>
<div id="dReportContainer"></div>
<div id="dGraficoReportes"></div>
<table class="centrar">
	<caption>
		<label>Detalle del reporte</label>
	</caption>
	<thead id="thReporteLideres">
	</thead>
	<tbody id="tlReporteLideres"></tbody>
</table>
<script language="JavaScript">
	$(document).ready(function(){
		var doceP = new OnecoreForms({
			formUrl		:utility.makeUrl("publics/loadReportByType"),
			windowModal	:"embed",
			type		:"load",
			parentId	:"dReportContainer",
			afterSuccess:function(data){
				var nc = new Array();
				var nh = new Array();
				var categorias = new Array();
				var dis = new Array();
				var maxLenght = 0;
				var tipo = 1;
				
				$("#tlReporteLideres").html("");
				
				for(i in data){
					nc[i] = data[i].ncelulas;
					nh[i] = data[i].nhijos;
					categorias[i] = data[i].user.nombre1+" "+data[i].user.apellido1;
					dis =  data[i].dis;
					if(maxLenght < dis.length) maxLenght = dis.length;
					
				}
				$("#thReporteLideres").append("<tr><th>Lider</th>");
				for(i=0;i<maxLenght;i++){
					tipo = tipo*12;
					$("#thReporteLideres").append("<th>"+tipo+"</th>");
				}
				$("#thReporteLideres").append("</tr>");
				
				ops = {
			        chart: {
			            renderTo: 'dGraficoReportes',
						defaultSeriesType: 'spline',
						zoomType: 'x'
			        },
			        title: {
			            text: 'Crecimiento por Lider'
			        }
					,
			        xAxis: {
						categories: categorias,
				        labels: {
				            rotation: -75,
				            align: 'right',
				            style: {
				                font: 'normal 11px Verdana, sans-serif',
								color:'white'
				            }
				        }
			        },
			        yAxis: {
			            title: {
			                text: 'Cantidad',
			                margin: 0
			            },
						maxZoom: 14 * 24 * 3600000
			        },
					tooltip: {
			         	formatter: function() {
			            	return 'El Lider <strong>'+ this.x +'</strong>, tiene <strong>'+this.y+" "+this.series.name +'</strong><br/>';
			       		}
			      	},
					series:[
						{
							name:"Célula(s)",
							data:nc
						},
						{
							name:"Hijo(s) Espiritual(es)",
							data:nh
						}
					]
			    }; 
				otro = new Highcharts.Chart(ops); 
			}
		});
		$("#lnkDocePrincipales").click(function(){
			doceP.setAjaxData("type=docep");
			doceP.customLoad();
		})
	});
</script>